<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Lottip</title>
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<link rel="icon" type="image/png" href="images/favicon.png">
</head>
<body id="bootstrap-override">
<div id="app">
    <div id="results" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-lg" role="document">
            <div id="modal-preloader" v-if="!modalQueryResult">Waiting for results...</div>
            <div class="modal-content" v-if="modalQueryResult">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Query execution result</h4>
                </div>
                <div class="modal-body">
                    <pre>{{modalQueryResult}}</pre>
                </div>
            </div>
        </div>
    </div>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header header-buttons">
                <div class="btn-group" role="group">
                    <button type="button" class="btn btn-primary navbar-btn" @click="connect" v-bind:class="[connected ? 'active': '']"> Start </button>
                    <button type="button" class="btn btn-primary navbar-btn" @click="disconnect" v-bind:class="[connected ? '': 'active']"> Stop </button>
                    <button type="button" class="btn btn-primary navbar-btn" @click="clearAll"> Clear </button>
                </div>
                <div class="btn-group filter" role="group">
                    <input type="text" class="form-control " id="filter" placeholder="Filter" v-model="filterQuery">
                </div>
                {{tipMessage}} </div>
            	<div class="navbar-collapse collapse">
                	<p class="navbar-text navbar-right"> Status: {{connected ? "connected" : "disconnected"}}
                   	 /
                   	 Queries: {{queriesCount}} </p>
            	</div>
        </div>
    </nav>
    <div class="container-fluid" id="data">
        <div class="row">
            <div class="col-sm-12">
                <p v-if="!queriesCount" class="text-center">No queries yet</p>
                <template v-for="connection, index, connId in connections">
                    <p class="connection"> <span> ↓ Connection #{{connId+1}} / {{isConnectionActive(connId) ? "active" : "finished"}} ↓ </span> </p>
                    <table class="table table-bordered">
                        <tr style="display: none;">
                            <th colspan="3">↓</th>
                        </tr>
                        <template v-for="query in connection">
                            <tr v-bind:class="[query.result]"> 
                                
                                <!--Query actions column start-->
                                <td class="tiny"><div class="dropdown"> 
                                        
                                        <!--Query actions dropdown button begin-->
                                        <button
                                                class="btn btn-default dropdown-toggle btn-xs"
                                                type="button"
                                                data-toggle="dropdown"
                                                aria-haspopup="true"
                                                aria-expanded="false"
                                        > <span class="caret"></span> </button>
                                        <!--Query actions dropdown button end-->
                                        
                                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                                            
                                            <!--Copy button begin-->
                                            <li> <a href="#" v-on:click.prevent="copyQuery(query.connId, query.cmdId)">Copy</a> </li>
                                            <!--Copy button end--> 
                                            
                                            <!--Execute button begin-->
                                            <li v-bind:class="[query.executable ? '' : 'disabled']"> <a href="#" v-on:click.prevent="executeQuery(query.connId, query.cmdId)">Execute</a> </li>
                                            <!--Execute button end-->
                                            
                                        </ul>
                                    </div></td>
                                <!--Query actions column end--> 
                                
                                <!--Query column start-->
                                <td class="query" v-bind:class="[query.expanded ? 'expanded': '']" v-on:click.prevent="toggleExpandQuery(query.connId, query.cmdId)"><!--Query error result block start-->
                                    
                                    <template v-if="query.expanded">
                                        <div class="error" v-if="query.error"> <code>{{query.error}}</code> </div>
                                    </template>
                                    
                                    <!--Query error result block end--> 
                                    
                                    {{query.query}}
                                    <div v-if="query.parameters" class="params">Params: <span class="label label-primary" v-for="param in query.parameters">{{param}}</span> </div></td>
                                <!--Query column end--> 
                                
                                <!--Duration column start-->
                                <td class="tiny"> {{query.duration}}s </td>
                                <!--Duration column end--> 
                                
                            </tr>
                        </template>
                    </table>
                </template>
            </div>
        </div>
    </div>
</div>
<script src="js/lodash.min.js" type="application/javascript"></script> 
<script src="js/vue.min.js" type="application/javascript"></script> 
<script src="js/clipboard.min.js" type="application/javascript"></script> 
<script src="js/jquery.min.js" type="application/javascript"></script> 
<script src="js/bootstrap.min.js" type="application/javascript"></script> 
<script src="js/app.js" type="application/javascript"></script>
</body>
</html>